<template>
	<view class="serch-result">
		<view
			@click="goArticleDetails(item.uid)"
			class="item"
			v-for="(item, index) in searchResult"
			:key="index"
		>
			<view class="title">{{ item.tatle }}</view>
			<view class="image" v-if="item.wztp">
				<image
					v-for="(image, i) in item.wztp"
					:key="i"
					:src="image"
					mode=""
				></image>
			</view>
			<view class="info">
				<text>{{ item.userName }}</text>
				<text>{{ item.pl }} 评论</text> <text>{{ dayjs(item.time).format('YYYY-MM-DD') }}</text>
			</view>
			<view class="item-bottom">
				<view class="comment">
					<van-icon name="comment-o" />
					评论
				</view>
				<view class="like">
					<van-icon name="like-o" />
					喜欢
				</view>
				<view class="share">
					<van-icon name="share-o" />
					分享
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs } from 'vue'
import { searchResultApi } from '../../api/modules/article'
import { UserStore } from '../../store/user.js'
import dayjs from 'dayjs'
const userStore = UserStore()
const state = reactive({ tatle: '', searchResult: [] })

const getSearchResult = async () => {
	const { data } = await searchResultApi({ tatle: state.tatle })
	state.searchResult = data.data
}

const goArticleDetails = uid => {
	const id = userStore.info.id
	uni.navigateTo({
		url: `/subpkg/details-article/details-article?uid=${uid}&id=${id}`
	})
}

// 页面加载
onLoad(message => {
	state.tatle = message.name
	getSearchResult()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { searchResult } = toRefs(state)
</script>

<style lang="scss">
page {
	background-color: #f5f7f9;
}
.serch-result {
	margin-top: 20rpx;
	.item {
		background-color: #fff;
		margin-bottom: 40rpx;
		.title {
			font-size: 32rpx;
			color: #3a3a3a;
			text-align: left;
			font-weight: 500;
			letter-spacing: 1px;
			font-stretch: normal;
			padding: 8px 12px;
		}
		.image {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			image {
				width: 33.33%;
				height: 146rpx;
				border-radius: 2px;
			}
		}
		.info {
			padding: 16rpx 24rpx;
			border-bottom: 0.5px solid #edeff3;
			text {
				color: #999;
				margin-left: 20rpx;
				&:first-child {
					margin-left: 0;
				}
			}
		}
		.item-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.comment,
			.like,
			.share {
				text-align: center;
				width: 33.33%;
				height: 90rpx;
				line-height: 90rpx;
				border-right: 0.5px solid #ececec;
				cursor: pointer;
				color: rgb(51, 51, 51);
				font-size: 36rpx;
			}
		}
	}
}
</style>
